<template>
  <div class="container">
    <h2>博客管理</h2>
    
    <div class="post-form">
      <h3>{{ postModule.editingPost ? '编辑文章' : '创建新文章' }}</h3>
      <div class="form-group">
        <label for="postTitle">标题:</label>
        <input id="postTitle" v-model="postModule.newPost.title" placeholder="请输入文章标题" />
      </div>
      <div class="form-group">
        <label for="postCategory">分类:</label>
        <select id="postCategory" v-model="postModule.newPost.categoryId">
          <option value="">请选择分类</option>
          <option v-for="category in postModule.categories" :key="category.id" :value="category.id">
            {{ category.name }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <label for="postAuthor">作者:</label>
        <input id="postAuthor" v-model="postModule.newPost.author" placeholder="请输入作者姓名" :disabled="postModule.editingPost" />
      </div>
      <div class="form-group">
        <label for="postContent">内容:</label>
        <textarea id="postContent" v-model="postModule.newPost.content" placeholder="请输入文章内容"></textarea>
      </div>
      <button @click="savePost" class="btn">{{ postModule.editingPost ? '更新文章' : '发布文章' }}</button>
      <button v-if="postModule.editingPost" @click="cancelPostEdit" class="btn-warning">取消编辑</button>
    </div>
    
    <div class="post-list-container">
      <h3>文章列表</h3>
      <div class="search-box">
        <input v-model="appModule.state.postSearch" placeholder="搜索文章..." />
      </div>
      <button @click="loadPosts" class="btn">刷新文章列表</button>
      <div class="loading" v-if="appModule.state.loading">加载中...</div>
      <div v-else>
        <div class="post-item" v-for="post in filteredPosts" :key="post.id">
          <div>
            <h4 class="post-title">{{ post.title }}</h4>
            <div class="post-meta">
              作者: {{ post.author }} | 
              分类: {{ postModule.getCategoryName(post.categoryId) }} | 
              {{ formatRelativeTime(post.createdAt) }}
            </div>
            <div class="post-excerpt">{{ truncateText(post.content, 100) }}</div>
          </div>
          <div class="post-actions">
            <button @click="viewPost(post)" class="btn-info btn-sm">查看</button>
            <button @click="editPost(post)" class="btn-warning btn-sm">编辑</button>
            <button @click="deletePost(post.id)" class="btn-danger btn-sm">删除</button>
          </div>
        </div>
        <div v-if="filteredPosts.length === 0">暂无文章</div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatRelativeTime, truncateText } from '../modules/utils.js';

export default {
  props: ['appModule'],
  data() {
    return {
      // 组件数据直接引用应用模块
    };
  },
  computed: {
    postModule() {
      return this.appModule.postModule;
    },
    filteredPosts() {
      return this.appModule.getFilteredPosts();
    }
  },
  methods: {
    formatRelativeTime,
    truncateText,
    async loadPosts() {
      try {
        await this.postModule.loadPosts();
      } catch (error) {
        this.appModule.state.error = error.message;
      }
    },
    async savePost() {
      this.appModule.state.error = '';
      
      // 验证输入
      if (!this.postModule.newPost.title || !this.postModule.newPost.content || !this.postModule.newPost.author) {
        this.appModule.state.error = '请填写标题、内容和作者';
        return;
      }
      
      try {
        await this.postModule.savePost(this.postModule.newPost);
        this.postModule.setEditingPost(null);
      } catch (error) {
        this.appModule.state.error = error.message;
      }
    },
    editPost(post) {
      this.postModule.setEditingPost(post);
    },
    viewPost(post) {
      this.postModule.viewPost(post);
    },
    cancelPostEdit() {
      this.postModule.setEditingPost(null);
    },
    async deletePost(postId) {
      if (!confirm('确定要删除这篇文章吗？')) {
        return;
      }
      
      try {
        await this.postModule.deletePost(postId);
      } catch (error) {
        this.appModule.state.error = error.message;
      }
    }
  }
};
</script>
</file>